vue3使用最新的属性defineModel实现父子组件数据响应式绑定

2024-06-28 02:31| 来源: 网络整理| 查看: 265

子父之间使用v-model双向绑定数据，子组件每次都要写emit和props觉得麻烦？以前，为了使组件支持与v-model双向绑定，它需要（1）声明prop，（2）在打算更新prop时发出相应的update:propName事件：现在再也不用这么麻烦了，直接使用defineModel就可以了，看一下官方文档：官方文档链接

有的人说需要单独在vite中配置开启，但是我用的时候就不用配置也可以使用。也许我用的最新版本？大家可以看一下自己的版本是否一致

如果你的版本更高或者 defineModel 没有生效，可以尝试在vite.config.js中开启：

plugins: [ vue({ script: { defineModel: true, }, }), ],

使用的时候需要注意，有两种方式，一种是默认绑定一个响应式数据的方式，一种是想绑定多个响应式数据的方式：

绑定一个数据的时候

在子组件里面直接定义：

// 通过父组件绑定一个双向绑定的skill值 const count = defineModel({ type: Number, default: 1 }) // 增加count const add = () => { count.value < 5 && count.value++ } // 减少 const sub = () => { count.value > 1 && count.value-- }

在父组件直接使用：v-model绑定值就可以

绑定多个响应式数据

在子组件里面定义：

// 声明 "count" prop，由父组件通过 v-model:count 使用 const count = defineModel("count") // 或者：声明带选项的 "count" prop const count = defineModel("count", { type: Number, default: 0 }) function inc() { // 在被修改时，触发 "update:count" 事件 count.value++ }

在父组件里面使用绑定：要使用 v-model: 属性名称才可以

【本文地址】

公司简介

联系我们